<template>
    
    <div class="search">
        <a-form layout="inline" class="leftform" :model="chacs" @finish="getuserlist">
            <a-form-item name="phone">
                <a-input v-model:value="chacs.phone" placeholder="手机号" />
            </a-form-item>
            <a-form-item >
                <a-button type="default" html-type="submit" >
                    检索
                </a-button>
            </a-form-item>
        </a-form>
        <a-button  type="dashed"  @click="addsub('addUser')"  >
            <template #icon>
            <PlusOutlined />
            </template>
        </a-button>
    </div>
    <a-table rowKey="userid" :bordered="true" :pagination="pagination" :columns="colname" :dataSource="datalist" align="center">
        <template #action="{record}">
            <a-button size="small" @click="deluser(record.userid)"   shape="round" danger>删除</a-button>
            <a-button size="small" class="edit" @click="addsub('editUser',{userid:record.userid})"  shape="round" type="primary">编辑</a-button>
        </template>
    </a-table>
    <a-drawer v-model:visible="showsub" width="580" :title="ctitle">
        <router-view @gbs="closedraw"></router-view>
    </a-drawer>
    
</template>
<style lang="less" scoped>
.pages{
    margin-top: 20px;
}
.search{
    margin-bottom: 14px;
}

.edit{
    margin-left: 12px;
}


.leftform{
    max-width:600px; float: right; width:auto;
}
</style>
<script>
import { defineComponent, reactive,ref, toRaw } from 'vue';
import { userList,userdel } from '@/api/user';
import {PlusOutlined} from '@ant-design/icons-vue';
import { useRouter } from 'vue-router';
import { message } from 'ant-design-vue';
message.config({top:'200px',duration:1.2});

export default defineComponent({
    components:{PlusOutlined},
    setup() {
        const chacs=reactive({
            phone:'',            
        });
        const ctitle=ref('');
        const colname=[
            {
                title:'用户编号',
                dataIndex:'userid',
                key:'userid',
                align:'center',
                width:'100px'
            },
            {
                title:'用户名',
                dataIndex:'username',
                key:'username',
                align:'center',
            },
            {
                title:'余额',
                dataIndex:'account',
                key:'account',
                align:'center',
            },
            {
                title:'积分',
                dataIndex:'score',
                key:'score',
                align:'center',
            },
            {
                title:'电话',
                dataIndex:'phone',
                key:'phone',
                align:'center',
            },
            {
                title:'邮箱',
                dataIndex:'email',
                key:'email',
                align:'center',
            }            ,
            {
                title:'订单数',
                dataIndex:'ordernum',
                key:'ordernum',
                align:'center',
            }            ,
            {
                title:'累计充值',
                dataIndex:'paynum',
                key:'paynum',
                align:'center',
            },
            {
                title:'操作',
                dataIndex:'action',
                key:'action',
                align:'center',
                width:'200px',
                slots:{customRender:'action'}
            }

        ];
        const showsub=ref(false);
        const datalist=reactive([]);
        const router=useRouter();
        
        

        const pagination=reactive({
            page:1,
            defaultPageSize:15,
            total:0,
            showSizeChange:(current,size)=>{
                pagination.page=current;
                pagination.defaultPageSize=size;
                getuserlist();
            },
            onChange:(current,size)=>{
                pagination.page=current;
                getuserlist();
            }
        });
        
        


        const getuserlist = () =>{
            const cs=toRaw(chacs);            
            const obj={...cs,page:pagination.page,pagesize:pagination.defaultPageSize};
            
            userList(obj).then(res=>{  
                
                if(res.data['code']==200){
                    pagination.total=res.data['data']['total'];                    
                    datalist.length=0;
                    datalist.push(...res.data['data']['datalist']);
                   
                }
                
            },
            err=>{
                console.log(err);
            }
            )
        };
        
        getuserlist();

        const deluser = (userid) =>{
            userdel({userid:userid}),then(
                res=>{
                    if(res.data['code']==200){
                        message.success('删除成功');
                        getuserlist();
                    }
                    else{
                        message.error(res.data['msg']);
                    }
                },
                err=>{
                    console.log(err);
                }
            )
        };

        

        const closedraw= () =>{
            showsub.value=false;
            getuserlist();
        };

        const addsub = (name,obj={}) =>{
            showsub.value=true;
            if(obj.userid==undefined)
            {
                ctitle.value='添加用户';                
            }
            else{
                ctitle.value='编辑用户信息';
            }
            router.push({name:name,params:obj,query:{rand:Math.random()}});
        };

        return {
            colname,datalist,pagination,showsub,deluser,closedraw,chacs,addsub,ctitle,getuserlist
        }
    },
})
</script>
